<!--
 * @Author: 迷洛洛ywc
 * @Date: 2024-05-31 09:32:05
 * @LastEditors: 迷洛洛ywc
 * @LastEditTime: 2024-06-24 12:08:48
 * @Description: file content
-->
<template>
  <div class="timeLineComponets">
    <div class="timeLine">
      <div class="timeLineList">
        <div class="content" v-for="item in growthData" :key="item.id">
          <div class="dian"></div>
          <div class="box-t">
            <div class="NSname">{{ item.type }}</div>
            <div class="user">操作人：{{ item.participants }}</div>
          </div>
          <div class="box-c">{{ item.time }}</div>
          <div class="box-b">
            <div class="farmStockList" v-if="item.agriLists !== null">
              <div
                class="farmStock"
                v-for="list in item.agriLists"
                :key="list.id"
              >
                <div class="name">{{ list.name }}</div>
                <div class="num">{{ list.num }}kg</div>
              </div>
            </div>
            <div class="pictureList" v-if="item.picture !== null && item.picture !== '' ">
              <div
                class="picture"
                v-for="(url, index) in pictureUrl(item.picture)"
                :key="index"
                @click="openPicture(pictureUrl(item.picture), index)"
              >
                <img :src="url" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailByIdApi } from '@/api/tracing'
import { ImagePreview } from 'vant'
export default {
  data () {
    return {
      id: '',
      growthData: {}
    }
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  created () {
    this.id = this.$route.query.tsId
    this.getDetailById(this.id)
  },
  methods: {
    async getDetailById (id) {
      const res = await getDetailByIdApi(id)
      console.log(res)
      this.growthData = res.data.json
      console.log(this.growthData)
    },
    pictureUrl (link) {
      console.log(link)
      if (link !== null) {
        link = link.split(',')
        return link
      } else if (link === null || link === '') {
        return ''
      }
    },
    openPicture (list, index) {
      ImagePreview({ images: list, startPosition: index })
    }
  }
}
</script>

<style lang="scss" scoped>
.timeLineComponets {
  // overflow-y: auto;
  min-height: 600px;
  padding: 0 0 20px;
}
.timeLineList {
  border-left: 1px solid #19b560;
  padding: 0 0 0 17px;
  margin-left: 12px;
  .content {
    position: relative;
    padding: 14px 11px 12px;
    width: 289px;
    border: 1px solid #e8f8ef;
    border-radius: 8px;
    margin-bottom: 12px;
    .dian {
      position: absolute;
      left: -22px;
      top: 50%;
      margin-top: -5px;
      width: 9px;
      height: 9px;
      background: #19b560;
      box-shadow: 0px 1px 2px 0px rgba(15, 34, 67, 0.2);
      border-radius: 50%;
      border: 2px solid #ffffff;
    }
    .box-t {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .NSname {
        border-left: 4px solid #19b560;
        padding-left: 11px;
        margin-left: -11px;
      }
      .user {
        font-weight: 400;
        font-size: 12px;
        color: #71807b;
      }
    }
    .box-c {
      font-weight: 400;
      font-size: 12px;
      color: #19b560;
      margin-bottom: 10px;
    }
    .box-b {
      .farmStockList {
        width: 263px;
        height: 28px;
        line-height: 28px;
        font-weight: 400;
        font-size: 12px;
        color: #19b560;
        background: #e8f8ef;
        border-radius: 0px 0px 0px 0px;
        margin-bottom: 10px;

        .farmStock {
          display: flex;
          justify-content: space-between;
          padding: 0 8px;
          margin-bottom: 4px;
        }
      }
      .pictureList {
        margin-bottom: 10px;
        height: 68px;
        display: flex;
        .picture {
          width: 64px;
          height: 64px;
          border-radius: 4px 4px 4px 4px;
          margin-right: 16px;
          border: 1px solid #ccc;
          img {
            width: 64px;
            height: 64px;
            border-radius: 4px 4px 4px 4px;
          }
        }
      }
    }
  }
}
</style>
